<template>
    <div class="wrapper">
        <header>
            <BackButton></BackButton>
			<p>积分记录</p>
        </header>

        <div class="point-list">
            <table>
                <thead>
                    <tr>
                        <th>记录ID</th>
                        <th>用户ID</th>
                        <th>积分变化</th>
                        <th>原因</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="log in point" :key="log.logId">
                        <td>{{ log.logId }}</td>
                        <td>{{ log.userId }}</td>
                        <td>{{ log.change }}</td>
                        <td>{{ log.reason }}</td>
                        <td>{{ log.createTime }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Footer/>
    </div>


</template>

<script setup>
import BackButton from '@/components/BackButton.vue';
import Footer from '@/components/Footer.vue';
import axios from 'axios';
import { onUnmounted,onMounted } from 'vue';
import { ref } from 'vue';
import{computed} from 'vue';
const point=ref([]);
const user =ref(JSON.parse(sessionStorage.getItem('user')) || {});
async function getPointsLog() {
    try{
        const res=await axios.get(`http://localhost:14000/PointController/user/${user.value.userId}`);
        point.value=res.data.result;
    }catch(error){
        console.error('获取积分失败:', error);
    }
}
const formattedPoints = computed(() => {
  return point.value.map(log => ({
    ...log,
    formattedTime: formatTime(log.createTime)
  }));
});
function formatTime(timestamp) {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-');
}
onMounted(() => {
  getPointsLog();
  
})

</script>

<style scoped>
/* Base styles */
.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 12vw; /* Space for fixed header */
  padding-bottom: 15vw; /* Space for footer */
}

/* Header styles */
header {
    width: 100%;
	height: 12vw;
	background-color: #007bff;
	color: white;
	font-size: 4.8vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Table container */
.point-list {
  width: 99%;
  margin: 2vw auto;
  background: white;
  border-radius: 2vw;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 3.5vw;
}

thead {
  background-color: #f8f9fa;
  position: sticky;
  top: 12vw; /* Below header */
}

th, td {
  padding: 3vw 2vw;
  text-align: center;
  border-bottom: 1px solid #e9ecef;
}

th {
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

td {
  color: #6c757d;
}

/* Zebra striping for rows */
tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* Hover effect */
tbody tr:hover {
  background-color: #e9f5ff;
}



</style>